const path = require('path')
const autoprefixer = require('autoprefixer')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')


console.log('######################-BASE-PARAM-######################')
console.log('NODE_ENV--------', process.env.NODE_ENV)
console.log('npm_config_report--------', process.env.npm_config_report)

const config = {
  entry: './src/index.js',
  output: {
    filename: process.env.NODE_ENV === 'production' ? 'js/[name].[contenthash:8].js' : '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    modules: false, //Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型,此设置不对代码进行转译，这样es6模块范式可以摇树优化
                    // useBuiltIns: 'usage', //按需导入
                    // targets: {
                    //   browsers: process.env.NODE_ENV === 'production' ? ["> 1%", "ie 10"] : ["last 1 chrome versions"]
                    // },
                    // corejs: { version: 3, proposals: true }
                  }
                ],
                '@babel/preset-react',
              ],
              plugins: [
                // [
                //   "@babel/plugin-transform-runtime",
                //   {
                //     corejs: {
                //       version: 3,
                //       proposals: true //支持提案级别的特性
                //     },
                //     useESModules: true,
                //   }
                // ],
                require.resolve('react-refresh/babel'),
                ['@babel/plugin-proposal-decorators', { "legacy": true }],
                ['@babel/plugin-proposal-class-properties', { "loose": true }], //不采用defineproperty定义属性，采用直接=赋值
                //     'dynamic-import-webpack'
              ],
              // cacheDirectory: true
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader', // creates style nodes from JS strings
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                autoprefixer()
              ]
            }
          },
          {
            loader: 'less-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: '10240', //小于10k进行base64转化
              name() {
                return 'img/[name].[contenthash:8].[ext]'
              }
            }
          }
        ]
      },
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html'), // html模板路径
      minify: {
        // 压缩HTML文件yarn
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true // 删除空白符与换行符
      }
    }),
    ...(process.env.npm_config_report ? [new BundleAnalyzerPlugin()] : []),
    new FriendlyErrorsWebpackPlugin(),
    new HardSourceWebpackPlugin(),
  ],
  resolve: {
    modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
    extensions: ['.js', '.json', '.jsx'],
    mainFields: ['main'],
    alias: {
      'react-hot-dom': '@hot-loader/react-dom'
      // 'react': path.resolve(__dirname, './node_modules/react/dist/react.min.js'), // react15
      // 'react': path.resolve(__dirname, './node_modules/react/umd/react.production.min.js'), // react16
    }
  }
}

module.exports = config
console.log('######################-BASE-PARAM-######################')
